import { useState } from "react";
import iconData from "@/asset/js/icons";
import styled from "styled-components";
import { Button, Input, Tooltip } from "antd";
import { flushSync } from "react-dom";
import { Icon } from "@iconify/react";
import useGetState from "@/hooks/useGetState";

const Styled = styled.div``;

const IconPicker = ({ value, updateModalForm }) => {
  const [choosed, setChoosed, getChoosed] = useGetState(value); //选中值

  const [icons, setIcons] = useState(
    iconData.filter((icon) => icon.includes(choosed))
  ); //可选图片列表

  function filterIcons() {
    setIcons(iconData.filter((item) => item.includes(getChoosed())));
  }

  //选中图标库中的某个图标，修改choosed数据
  function selectIcon(icon) {
    setChoosed(icon);
    updateModalForm({
      icon,
    });
  }

  return (
    <Styled>
      <Tooltip
        overlayStyle={{
          maxWidth: "300px",
          width: "250px",
        }}
        title={
          <>
            {/* 图片列表 */}
            {icons.length ? (
              <ul className="h-150 w-300 overflow-y-scroll">
                {icons.map((icon, index) => {
                  return (
                    <li
                      key={index}
                      className="mx-5 inline-block cursor-pointer hover"
                      onClick={selectIcon.bind(null, icon)}
                    >
                      <Icon fontSize={18} icon={icon} />
                    </li>
                  );
                })}
              </ul>
            ) : (
              <div>
                <Icon icon={choosed} fontSize={28} />
              </div>
            )}
            <footer className="menu-footer">
              更多图标去
              <a
                className="text-blue"
                target="_blank"
                href="https://icones.js.org/collection/all"
              >
                Icones
              </a>
              查看
            </footer>
          </>
        }
        trigger={["click", "hover"]}
        placement="bottomLeft"
        color="#fff"
        overlayClassName="menu"
      >
        <Input
          placeholder="请输入图标名称"
          value={choosed}
          prefix={<Icon icon="material-symbols:search" fontSize={18} />}
          suffix={<Icon fontSize={18} icon={choosed} />} //渲染选中的图标
          onChange={(e) => {
            setChoosed(e.target.value);
            filterIcons();
          }}
        />
      </Tooltip>
    </Styled>
  );
};

export default IconPicker;
